<template>
	<view class="ccontainer">
		<!-- 搜索 -->
		<view class="indexNav cflex cflex_row cflex_between cflex_items" :style="{paddingTop:statusBarHeight + 27 + 'rpx'}">
			<view class="indexNav-left cflex cflex_row cflex_items">
				<image class="indexNav-leftImage" src="/static/clq-image/index-search-icon.png" mode=""></image>
				<view style="font-size: 28rpx;color: #555;">搜索商品</view>
			</view>
			<image class="indexNav-rightImage" src="/static/clq-image/index-nav-right2.png" mode=""></image>
		</view>
		<!-- 商品分类 -->
		<!-- <view class="navCate cflex cflex_col" :style="{height:Height + 'rpx'}"> -->
			<!-- 顶部 -->
			<view class="top-warp cflex cflex_row" :style="{top:statusBarHeight+ 98 + 'rpx'}">
				<view class="top-warp1 cflex cflex_col cflex_items">
					<image src="/static/clq-image/fenlei_1.png" mode=""></image>
					<view style="margin-right: 13rpx;">综合</view>
				</view>
				<view class="top-warp2 cflex cflex_row cflex_items">
					<block v-for="(item1,index1) in topTypes" :key="index1">
						<view class="top-warp2-item cflex cflex_col cflex_center cflex_items" @click="tabTopChange" :data-index="index1"
						 :data-typeid="item1.type_id">
							<image :src="item1.image" mode=""></image>
							<view class="top-warp2-item-text" :class="{item1_act:index1==tabTopIndex}">{{item1.title}}</view>
						</view>
					</block>
				</view>
			</view>
			<!-- 底部 -->
			<!-- <view class="cflex cflex_row"> -->
				<!-- 左部 -->
				<scroll-view class="left-warp" :scroll-y="true" :style="{top:statusBarHeight + 218 + 'rpx'}">
					<view v-for="(item2,index2) in cateList" :key="index2">
						<view class="tab cflex cflex_row cflex_items" :class="{item2_act:index2==tabLeftIndex}" @click="tabLeftChange"
						 :data-index="index2" :data-typeid="item2.type_id"><span class="tabTip1">{{item2.title}}</span><span v-if="item2.open==true"
							 class="tabTip2">
								<image style="width: 16rpx;height: 8rpx;" src="/static/clq-image/cate-little.png" mode=""></image>
							</span></view>


						<view class="tabItemBlock" v-for="(item3,index3) in cateList[tabLeftIndex].childs" :key="index3" v-if="item2.open==true">
							<view class="tabItem" :class="{item3_act:index3==tabIndex}" @click="ItemChange" :data-index="index3"
							 :data-typeid="item3.type_id">{{item3.title}}</view>
						</view>
					</view>
				</scroll-view>
				<!-- 右部 -->
				<view class="right-warp cflex cflex_col cflex_items">
					<view :style="{height:statusBarHeight + 218 + 'rpx'}"></view>
					<view v-if="list.length == 0" class="cflex cflex_col cflex_center cflex_items">
						<image style="width: 358rpx;height: 266rpx;margin-top: 350rpx;" src="/static/clq-image/search-noList.png" mode=""></image>
					</view>
					<block v-if="list.length != 0" v-for="(item,i) in list" :key="i">
						<view class="proItem cflex cflex_col">
							<view class="proItem-top cflex cflex_row cflex_between">
								<image :src="item.images[0]" mode=""></image>
								<view class="cflex cflex_col cflex_1" style="padding-right: 15rpx;">
									<view class="proItem-title">{{item.name}}</view>
									<view class="proItem-tip">{{item.type_name}}</view>
									<view class="proItem-price1">出厂价：{{item.factory_price}}元</view>
									<view class="proItem-price2">售价：{{item.quoted_price}}元</view>
									<view class="proItem-sale">购买件数：{{item.sale}}件</view>
									<view class="proItem-num">起订量：{{item.num}}件</view>
								</view>
							</view>
							<view class="proItem-bot cflex cflex_row cflex_items cflex_right">
								<view class="proItemBtn1 cflex cflex_row cflex_center cflex_items">加入报价表</view>
								<view class="proItemBtn2 cflex cflex_row cflex_center cflex_items">我要下单</view>
								<view class="proItemBtn3 cflex cflex_row cflex_center cflex_items">我要报价</view>
							</view>
						</view>
					</block>
					<view class="nomore flex flex_row flex_center" v-if="!isMore && list.length != 0">{{ getmore }}</view>
					<view class="nomore flex flex_row flex_center" v-if="isMore && list.length != 0">{{ nomore }}</view>
					<view style="height: 118rpx;width: 750rpx;"></view>
				</view>
			<!-- </view> -->
		<!-- </view> -->
		<uniTabBar1 :current="currentIndex" style="z-index:999;" v-if="classType==1 || classType==3" />
		<uniTabBar2 :current="currentIndex" style="z-index:999;" v-if="classType==2 || classType==4" />
	</view>
</template>

<script>
	import {
		ajax
	} from '../../ajax.js';
	import uniTabBar1 from '../../components/uni-tabBar1';
	import uniTabBar2 from '../../components/uni-tabBar1';
	export default {
		components: {
			uniTabBar1,
			uniTabBar2
		},
		data() {
			return {
				classType: '',
				currentIndex: 2,
				Height: '',
				statusBarHeight: '',
				search: '',
				// triggered: false,
				firstNum: 1,
				num: 3,
				isLoading: true, //是否可滚动
				isMore: true, //是否有数据
				nomore: '',
				getmore: '',
				topTypes: [],
				list: [],
				cateList: [],
				tabTopIndex: '0',
				tabLeftIndex: '0',
				tabIndex: '0',
				typeid: '',
				level1: '',
				level2: '',
				topTypeId:''
			};
		},
		onShow: function() {
			let that = this
			that.classType = uni.getStorageSync('class')
			uni.getSystemInfo({
				success: function(res) {
					console.log(res)
					let screenHeight = parseFloat(res.screenHeight * 2)
					let statusBarHeight = parseFloat(res.statusBarHeight * 2)
					that.statusBarHeight = statusBarHeight
					that.Height = screenHeight - statusBarHeight
					console.log('that.Height', that.Height)
				}
			})
		},
		onLoad: function(opt) {
			let that = this
			that.topTypeId = opt.typeid
			that.getList()
			that.getCate()
		},
		methods: {
			ItemChange(e) {
				let that = this
				that.tabIndex = e.currentTarget.dataset.index
				that.typeid = e.currentTarget.dataset.typeid
				that.getList()
			},
			// 切换左栏item
			tabLeftChange(e) {
				let that = this
				that.tabLeftIndex = e.currentTarget.dataset.index
				// let open = that.cateList[that.tabLeftIndex].open
				// that.cateList[that.tabLeftIndex].open = !open
				for (let items in that.cateList) {
					console.log(items)
					that.cateList[items].open = false;
					that.cateList[that.tabLeftIndex].open = true;
				}
				that.level2 = e.currentTarget.dataset.typeid
				that.typeid = that.level2
				that.getList()
				// console.log('level2',that.level2)
			},
			// 切换上栏item
			tabTopChange(e) {
				let that = this
				that.level1 = e.currentTarget.dataset.typeid
				that.level2 = ''
				that.tabTopIndex = e.currentTarget.dataset.index
				that.typeid = that.level1
				that.getList()
				// console.log('level1',that.level1)
				that.getCate()
			},
			getCate() {
				let that = this
				// uni.showLoading({
				// 	title: "加载中"
				// })
				ajax({
					url: 'goods/getTypesLevel',
					data: {
						type_id: that.typeid,
						level1: that.level1,
						level2: that.level2
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					method: 'POST',
					success: function(res) {
						// uni.hideLoading()
						let result = res.data.data
						if (res.data.code == 1) {
							for (let i = 0; i < result.length; i++) {
								result[i].open = false
							}
							that.cateList = result
							console.log('cateList', that.cateList);
						}
					},
					error: function() {
						uni.showToast({
							title: res.data.msg,
							duration: 1500,
							icon: 'none'
						});
					}
				});
			},
			getList() {
				let that = this
				// uni.showLoading({
				// 	title: "加载中"
				// })
				if(that.topTypeId){
					let typeid = that.topTypeId
				}
				ajax({
					url: 'goods/goodsList',
					data: {
						token: uni.getStorageSync('token'),
						type_id: that.typeid,
						search: that.search,
						firstNum: that.firstNum,
						num: that.num
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					method: 'POST',
					success: function(res) {
						uni.hideLoading()
						let result = res.data.data
						console.log('listresult', result);
						if (res.data.code == 1) {
							let list = result.goods.list
							that.topTypes = result.types
							console.log('that.topTypes', that.topTypes)
							if (!that.typeid) {
								that.level1 = that.topTypes[0].type_id
								that.getCate()
							}
							if(that.topTypeId){
								for(let i = 0;i<that.topTypes.length;i++){
									if(that.topTypes[i].type_id == that.topTypeId){
										that.tabTopIndex = i
									}
								}
							}
							if (that.firstNum == 1) {
								console.log('00')
								if (list.length != 0) {
									that.list = list
									// console.log('that.list',that.list)
								}
							} else {
								console.log('000')
								let listItem = list
								if (listItem.length != 0) {
									that.list = that.list.concat(listItem)
									console.log('合并', that.list);
								}
							}
							console.log('that.list', that.list);

							let total = result.goods.total;
							that.last_page = result.goods.last_page;

							if (total == 0) {
								that.isLoading = true; //是否可滚动
								that.isMore = true; //是否有数据
								that.nomore = '暂无相关内容~';
								that.getmore = '';
							} else {
								that.isLoading = false; //是否可滚动
								that.isMore = false; //是否有数据
								that.nomore = '暂无相关内容~';
								that.getmore = '';
							}
							if (that.firstNum < that.last_page) {
								that.isLoading = false; //是否可滚动
								that.isMore = false; //是否有数据
								that.nomore = '没有更多内容了~';
								that.getmore = '';
							} else if ((that.firstNum = that.last_page)) {
								that.isLoading = true; //是否可滚动
								that.isMore = true; //是否有数据
								that.nomore = '没有更多内容了~';
								that.getmore = '';
							} else {
								that.isLoading = true; //是否可滚动
								that.isMore = true; //是否有数据
								that.nomore = '没有更多内容了~';
								that.getmore = '';
							}
						}else if(res.data.code == 0){
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						}else if(res.data.code == -1){
							uni.reLaunch({
								url:'/pages/clq_login/clq_login'
							})
						}else if(res.data.code == -2){
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						}
					},
					error: function() {
						uni.showToast({
							title: res.data.msg,
							duration: 1500,
							icon: 'none'
						});
					}
				});
			},
			onPullDownRefresh() {
				let that = this;
				// that.triggered = true;
				uni.showLoading({
					title: '努力刷新中'
				});
				that.firstNum = 1;
				that.getList();
				setTimeout(function() {
					uni.hideNavigationBarLoading() //完成停止加载
					uni.stopPullDownRefresh() //停止下拉刷新
					uni.hideLoading(); //隐藏加载框
				}, 1500);
			},
			onReachBottom() {
				let that = this;
				console.log(111);
				uni.showLoading({
					title: '努力加载中'
				});
				if (that.firstNum < that.last_page) {
					that.firstNum = that.firstNum + 1;
					that.isLoading = false; //是否可滚动
					that.isMore = false; //是否有数据
					that.nomore = '没有更多内容了~';
					that.getmore = '';
					that.getList();
					uni.hideLoading();
				} else if ((that.firstNum = that.last_page)) {
					that.isLoading = true; //是否可滚动
					that.isMore = true; //是否有数据
					that.nomore = '没有更多内容了~';
					that.getmore = '';
					uni.hideLoading();
				} else {
					that.isLoading = true; //是否可滚动
					that.isMore = true; //是否有数据
					that.nomore = '没有更多内容了~';
					that.getmore = '';
					uni.hideLoading()
				}
			}
		}
	}
</script>

<style>
	page{
		background-color: #f7f7f7;
	}

	/* 搜索 */
	.indexNav {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx 25rpx 50rpx;
		background-color: #fff;
		position: fixed;
		top: 0;
		z-index:99;
	}

	.indexNav-rightImage {
		width: 44rpx;
		height: 44rpx;
	}

	.indexNav-left {
		width: 580rpx;
		height: 56rpx;
		background: #f7f7f7;
		border-radius: 28rpx;
	}

	.indexNav-leftImage {
		width: 38rpx;
		height: 38rpx;
		margin: 0 33rpx 0 19rpx;
	}

	.navCate {}

	/* 顶部 */
	.top-warp {
		width: 100%;
		box-sizing: border-box;
		height: 120rpx;
		background-color: #fff;
		padding: 0 20rpx 0 23rpx;
		position: fixed;
		z-index:99;
		/* top:98rpx; */
	}

	.top-warp1 {
		width: ;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		border-right: 3rpx solid #f7f7f7;
	}

	.top-warp1 image {
		width: 46rpx;
		height: 46rpx;
		margin: 15rpx 47rpx 18rpx 32rpx;
	}

	.top-warp2-item {
		width: 100rpx;
		height: 100%;
		font-size: 24rpx;
		margin-left: 30rpx;
		font-weight: 500;
		color: #333333;
	}

	.item1_act {
		font-weight: 700;
		color: #ff7427;
	}

	.top-warp2-item image {
		width: 50rpx;
		height: 50rpx;
		border-radius: 100%;
		margin-bottom: 12rpx;
	}

	.top-warp2-item-text {
		width: 100rpx;
		overflow: hidden;
		/* text-overflow:ellipsis; */
		white-space: nowrap;
		text-align: center;
	}

	/* 左边 fixed定位*/
	.left-warp {
		width: 180rpx;
		height: 100%;
		padding-top: 3rpx;
		padding-left: 20rpx;
		background-color: #fff;
		position: fixed;
		z-index: 10;
		left: 0;
		overflow-y: auto;
		z-index:99;
	}

	.tab {
		width: 180rpx;
		height: 53rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		padding-left: 22rpx;
	}

	.tabTip1 {
		width: 100rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.tabTip2 {
		display: inline-block;
		float: right;
	}

	.item2_act {
		border-left: 5rpx solid #ff7427;
		background: linear-gradient(to right, #ffc6a6 0%, #ffece1 100%);
	}

	.tabItemBlock {
		padding-top: 11rpx;
		padding-left: 22rpx;
	}

	.tabItem {
		width: 180rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
		margin-bottom: 28rpx;
	}

	.item3_act {
		color: #FF7427;
	}

	/* 右部 */
	.right-warp {
		width: 100%;
		box-sizing: border-box;
		height: 100%;
		padding-left: 200rpx;
		padding-top: 32rpx;
		background-color: #f7f7f7;
	}

	.proItem {
		width: 518rpx;
		height: 370rpx;
		background: #fff;
		border-radius: 20rpx;
		background-color: #fff;
		margin-bottom: 22rpx;
	}

	.proItem image {
		width: 226rpx;
		height: 274rpx;
		border-radius: 20rpx 0 0 0;
		margin-right: 20rpx;
	}

	.proItem-title {
		width: 222rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		margin-top: 15rpx;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.proItem-tip {
		width: 222rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #555555;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.proItem-price1 {
		font-size: 28rpx;
		font-weight: 500;
		color: #cf0000;
	}

	.proItem-price2 {
		font-size: 28rpx;
		font-weight: 500;
		color: #d50000;
	}

	.proItem-sale {
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
	}

	.proItem-num {
		font-size: 28rpx;
		font-weight: 500;
		color: #555555;
	}

	.proItem-bot {
		border-top: 1rpx solid #f7f7f7;
		padding-top: 15rpx;
		padding-right: 15rpx;
		margin-top: 15rpx;
	}

	.proItemBtn1 {
		width: 150rpx;
		height: 40rpx;
		background: #fff;
		border: 1rpx solid #ff7427;
		border-radius: 20px;
		font-size: 24rpx;
		font-weight: 500;
		color: #ff7427;
		margin-right: 12rpx;
	}

	.proItemBtn2 {
		width: 136rpx;
		height: 40rpx;
		background: #fff;
		border: 1rpx solid #ff7427;
		border-radius: 20px;
		font-size: 24rpx;
		font-weight: 500;
		color: #ff7427;
		margin-right: 12rpx;
	}

	.proItemBtn3 {
		width: 136rpx;
		height: 40rpx;
		background: #ff7427;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #ffffff;
	}
</style>
